<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <!-- 登录页面logo -->
      <div class="title-container">
        <h3 class="title">
          <img src="@/assets/login_logo.png" alt="" class="img_logo">
        </h3>
      </div>
      <!-- 登录账号 -->
      <el-form-item prop="loginName">
        <!-- 左侧小图标 -->
        <span class="svg-container">
          <svg data-v-26affb70="" version="1.1" viewBox="0 0 1024 1024" class="svg-icon svg-fill" style="width: 16px; height: 16px;">
            <path pid="0" d="M757.76 1024H266.24c-61.44 0-112.64-59.546-112.64-130.97V130.97C153.6 59.546 204.8 0 266.24 0h491.52C819.2 0 870.4 59.546 870.4 130.97v762.06c0 71.424-51.2 130.97-112.64 130.97zM266.24 71.424c-28.672 0-51.2 26.214-51.2 59.546v762.06c0 33.332 22.528 59.546 51.2 59.546h491.52c28.672 0 51.2-26.214 51.2-59.546V130.97c0-33.332-22.528-59.546-51.2-59.546H266.24z" _fill="#727CAD" />
            <path pid="1" d="M686.95 870.4h-298.7c-15.872 0-29.85-11.93-29.85-25.6s13.926-25.6 29.85-25.6h298.7c15.872 0 29.85 11.93 29.85 25.6s-13.926 25.6-29.85 25.6z" _fill="#727CAD" />
          </svg>
        </span>
        <el-input
          ref="loginName"
          v-model="loginForm.loginName"
          placeholder="Username"
          name="loginName"
          type="text"
          tabindex="1"
          auto-complete="on"
          maxlength="19"
        />
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <!-- 左侧小图标 -->
        <span class="svg-container">
          <svg data-v-26affb70="" version="1.1" viewBox="0 0 1024 1024" class="svg-icon svg-fill" style="width: 16px; height: 16px;"><defs />
            <path pid="0" d="M768 358.4h-60.262V244.736c0-103.731-87.757-188.211-195.738-188.211-108.032 0-195.738 84.48-195.738 188.211V358.4H256V244.736C256 109.773 370.842 0 512 0s256 109.773 256 244.736V358.4zm7.322 665.6H248.678c-80.742 0-146.278-66.918-146.278-149.146v-367.41c0-82.126 65.638-149.044 146.278-149.044h526.644c80.64 0 146.278 66.918 146.278 148.992v367.462c0 82.228-65.638 149.146-146.278 149.146zM248.678 418.048c-48.435 0-87.756 40.038-87.756 89.395v367.411c0 49.306 39.321 89.396 87.756 89.396h526.644c48.435 0 87.756-40.09 87.756-89.396v-367.41c0-49.358-39.321-89.396-87.756-89.396H248.678z" _fill="#727CAD" /><path pid="1" d="M767.078 819.2H564.122c-.461 0-.922-.41-.922-.82v-49.56c0-.41.46-.82.922-.82h202.956c.461 0 .922.41.922.82v49.56c0 .513-.46.82-.922.82z" _fill="#727CAD" />
          </svg>
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="Password"
          name="password"
          tabindex="2"
          auto-complete="on"
          maxlength="21"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item prop="code">
        <!-- 左侧小图标 -->
        <span class="svg-container">
          <svg data-v-26affb70="" version="1.1" viewBox="0 0 1024 1024" class="svg-icon svg-fill" style="width: 16px; height: 16px;">
            <path pid="0" d="M512.013 1023.986a94.971 94.971 0 0 1-51.248-13.926C394.36 969.102 219.01 859.335 145.388 713.012a1372.195 1372.195 0 0 1-93.845-425.041 99.528 99.528 0 0 1 67.12-102.447c44.03-14.642 133.523-45.36 176.12-65.84A744.002 744.002 0 0 0 432.605 32.65l14.438-11.008a110.638 110.638 0 0 1 131.372 0l12.953 9.523a743.95 743.95 0 0 0 137.158 91.439c42.546 20.479 131.322 50.48 174.635 65.123a100.961 100.961 0 0 1 69.27 104.596 1377.366 1377.366 0 0 1-93.077 419.257C807.167 857.9 629.614 967.617 563.98 1008.626a95.746 95.746 0 0 1-51.966 15.36zm0-951.147a45.054 45.054 0 0 0-26.008 7.32l-12.287 9.524a810.661 810.661 0 0 1-149.344 92.155c-46.948 22.732-135.673 52.734-183.287 68.81a30.718 30.718 0 0 0-22.424 32.203 1343.473 1343.473 0 0 0 85.91 397.958c64.918 128.813 234.535 234.126 288.65 269.299a42.033 42.033 0 0 0 33.228 0c55.55-34.405 225.167-139.77 288.651-269.3a1311.577 1311.577 0 0 0 85.91-393.605 32.254 32.254 0 0 0-20.991-32.92c-47.614-16.076-136.34-46.078-183.287-68.759a815.064 815.064 0 0 1-146.476-95.893l-13.721-10.239a33.586 33.586 0 0 0-24.575-6.605zm-48.381 644.576l-176.785-179.96a37.067 37.067 0 0 1 0-51.965 35.838 35.838 0 0 1 51.197 0l125.588 128.762 255.475-259.008a35.838 35.838 0 0 1 51.249 0 37.067 37.067 0 0 1 0 51.965L463.683 717.415z" _fill="#727CAD" />
          </svg>
        </span>
        <el-input
          ref="code"
          v-model="loginForm.code"
          v-loading="loading"
          type="text"
          placeholder="请输入验证码"
          name="code"
          tabindex="2"
          maxlength="4"
          auto-complete="on"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @keydown.enter.native="handleLogin"
        />
        <span class="show-code" @click="updateCode">
          <div class="code_img">
            <img :src="img" alt="" @click="onClick">
          </div>
        </span>
      </el-form-item>
      <!-- 登录按钮 -->
      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        class="login-btn"
        @click.native.prevent="handleLogin"
      >登录</el-button>
    </el-form>
  </div>
</template>

<script>
// import { validUsername } from '@/utils/validate'
import { getImageCodeApi } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      img: '',
      loginForm: {
        clientToken: Math.floor(Math.random() * 100 + 1),
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType: 0
      },
      loginRules: {
        // validator: validateUsername
        loginName: [{ required: true, trigger: 'blur', mssage: '请输入账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        code: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getImageCodeFn()
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    async handleLogin() {
      try {
        // console.log(this.$refs.loginForm.validate()) promise
        // 确保每一项表单域校验通过
        const res = await this.$refs.loginForm.validate()
        console.log(res)
        // this.$refs.loginForm.validate() 是一个promise
        // 如果校验通过 返回值为true,反之false
        // 校验不通过 promise rejected 会报错 被catch捕捉到
        // 通过登录接口 把数据提供给后端
        await this.$store.dispatch('user/loginAction', this.loginForm)
        // console.log('是否登录', this.$store.getters.isLogin)
        if (this.$store.getters.token) this.$router.push('/')
        // this.$router.push('/')
      } catch (e) {
        console.log(e)
      }
    },
    updateCode() {},
    // 随机生成验证码
    async getImageCodeFn() {
      try {
        this.loading = true
        const res = await getImageCodeApi(this.loginForm.clientToken)
        // console.log(res)
        const blob = new Blob([res.data], { type: 'image/png' })
        const url = window.URL.createObjectURL(blob)
        this.img = url
        this.loginForm.code = ''
        // console.log(this.img)
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },
    // 点击更换验证码
    onClick() {
      this.loginForm.clientToken = Math.floor(Math.random() * 100 + 1)
      this.getImageCodeFn()
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#999;;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
    background-image: url('~@/assets/login-bg.jpg');
    background-position: center;
    background-size: 1530px 720px;
   .img_logo{
    position: absolute;
    width: 96px;
    height: 96px;
    top: -125px;
    left: 50%;
    margin-left: -48px;
    }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      // caret-color: $cursor;    //光标显示颜色

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    width: 100%;
    height: 52px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
  }
  .login-btn{
    width: 100%;
    height: 52px;
    background: linear-gradient(262deg,#2e50e1,#6878f0);
    opacity: .91;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 7px 22px #cfcfcf;
  }
  .code_img{
    // background-color: red;
    width: 130px;
    height: 50px;
  }
}
</style>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 40px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 10px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
    .show-code {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
